<script setup lang="ts">
import { share_create } from "@/api/share";
import { ElLoading } from "element-plus";
interface Props {
  modelValue: boolean;
  row: any;
}
const obj = {
  shareTime: 7,
  checked1: false,
  accessPwd: "",
};
const emits = defineEmits(["update:modelValue"]);
const cur_page = ref(false);
const props = withDefaults(defineProps<Props>(), {
  row: {},
});
const show = computed(() => props.modelValue);
/**
 * 关闭
 */
const init = () => {
  shareResult.value = {};
  cur_page.value = false;
  linkShare.value = obj;
};
const closed = () => {
  // console.log(222222222, show);
  emits("update:modelValue", false);
  init();
};

const linkShare = ref({ ...obj });

const shareResult: any = ref({});

const click_create = async () => {
  const loading = ElLoading.service({
    target: document.getElementById("shareCreate"),
    text: "正在创建分享链接，请稍等...",
    background: "rgba(0, 0, 0, 0.2)",
  });
  let params = {
    ...linkShare.value,
    fileId: props.row.id,
    filePath: props.row.filePath,
  };
  let res: any = await share_create(params);
  if (res.code == 0) {
    loading.close();
    cur_page.value = true;
    // ElMessage.success(res.msg);
    let data = res.data[0];
    shareResult.value = {
      ...data,
      shareLink: import.meta.env.VITE_APP_API_URL + data.shareLink,
    };
  } else {
    ElMessage.error(res.msg);
  }
};
const copy = async () => {
  let source = `链接：${shareResult.value.shareLink}`;
  if (shareResult.value.accessPwd) {
    source += ` 提取码：${shareResult.value.accessPwd}`;
  }
  // console.log(source);

  let res = await navigator.clipboard.writeText(source);
  // console.log(res);

  ElMessage.success("复制成功");
};
</script>

<template>
  <el-dialog
    v-model="show"
    title="Notice"
    width="500"
    destroy-on-close
    center
    @close="closed"
    :show-close="false"
    style="border-radius: 10px"
    append-to-body
  >
    <template #header="{ close }">
      <div class="my-header">
        <span>{{ row.fileName }}</span>
        <el-icon
          style="cursor: pointer"
          class="el-icon--left"
          @click.stop="close"
          ><CircleCloseFilled
        /></el-icon>
      </div>
    </template>
    <div v-if="!cur_page" id="shareCreate">
      <div class="flex-Cont">
        <label for="shareTime">有效期：</label>
        <el-radio-group id="shareTime" v-model="linkShare.shareTime">
          <el-radio :value="3">1天</el-radio>
          <el-radio :value="7">7天</el-radio>
          <el-radio :value="30">30天</el-radio>
          <el-radio :value="0">永久</el-radio>
        </el-radio-group>
      </div>
      <div class="flex-Cont">
        <label for="accessPwd">提取码：</label>
        <div id="accessPwd">
          <el-checkbox
            v-model="linkShare.checked1"
            label="有提取码"
            size="large"
            @change="
              (val) => {
                if (!val) {
                  linkShare.accessPwd = '';
                }
              }
            "
          />
          <el-input
            :disabled="!linkShare.checked1"
            v-model="linkShare.accessPwd"
          ></el-input>
        </div>
      </div>
      <div
        style="
          display: flex;
          justify-content: center;
          align-items: center;
          margin-top: 40px;
        "
      >
        <el-button type="primary" @click="click_create">创建链接</el-button>
      </div>
    </div>
    <div v-if="shareResult.shareLink">
      <div style="color: var(--el-color-primary)">
        <el-icon><SuccessFilled /></el-icon>
        <span>成功创建私密链接</span>
      </div>
      <el-input
        type="textarea"
        autosize
        :readonly="true"
        v-model="shareResult.shareLink"
      ></el-input>
      <div
        class="flex-Cont"
        v-if="shareResult.accessPwd"
        style="margin-top: 10px"
      >
        <label for="accessPwd">提取码：</label>
        <el-input
          autosize
          :readonly="true"
          v-model="shareResult.accessPwd"
        ></el-input>
      </div>
      <div style="font-size: px2rem(12px); margin-top: 10px">
        <p v-if="shareResult.shareTime == 0">
          链接永久生效<span style="font-size: 10px">
            复制链接到浏览器打开即可下载。</span
          >
        </p>
        <p v-else>
          链接<span style="color: var(--el-color-primary)"
            >{{ shareResult.shareTime }}天</span
          >失效<span style="font-size: 10px">
            复制链接到浏览器打开即可下载。</span
          >
        </p>
      </div>
      <div
        style="
          display: flex;
          justify-content: center;
          align-items: center;
          margin-top: 40px;
        "
      >
        <el-button type="primary" @click="copy">复制链接及提取码</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<style lang="scss" scoped>
.my-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.flex-Cont {
  display: flex;
  align-items: flex-start;
  margin-bottom: px2rem(20px);
  label {
    white-space: nowrap;
  }
}
:deep(.el-radio) {
  height: 24px;
}
:deep(.el-checkbox.el-checkbox--large) {
  height: 24px;
}
</style>
